import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  withRouter
} from 'react-router-dom'
import './style.less'
import SearchInput from "../SearchInput";

class HomeHeader extends React.Component {
  constructor(props, context){
    super(props, context);
    this.state = {
      kwd: ''
    }
  }
  render(){
    return (
      <div id="home-header" className="clear-fix">
        <div className="home-header-left float-left">
          <Link to="/city">
            <span>{this.props.cityName}</span>
            &nbsp;
            <i className="icon-angle-down"></i>
          </Link>
        </div>
        <div className="home-header-right float-right">
          <Link to="/login">
            <i className="icon-user"></i>
          </Link>
        </div>
        <div className="home-header-middle">
          <div className="search-container">
            <i className="icon-search"></i>
            &nbsp;
              <SearchInput value="" enterHandle={this.enterHandle.bind(this)} />
          </div>
        </div>
      </div>
    );
  }

  enterHandle(value){
    // console.log(123);
    // console.log(this);
    this.props.history.push('/search/all/' + encodeURIComponent(value));
  }
  ChangeHandle(e){
    var val = e.target.value;
    this.setState({
      kwd: val
    })
  }
  KeyUpHandle(e){
    if(e.keyCode !== 13){
      return
    }
    this.props.history.push("/search/all/" + encodeURIComponent(this.state.kwd));
  }
}

export default withRouter(HomeHeader);